<template>
  <view>
    <slot></slot>
    <view class="mask" v-if="visible" @touchmove="moveHandle">
      <view class="picker-date">
        <view class="button">
          <view @click="changeVisible">取消</view>
          <view @click="confirm" :class="disable ? '' : 'disable'">确认</view>
        </view>
        <picker-view
          indicator-style="height: 50px; line-height: 50px;"
          :value="value"
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column v-for="(item, index) in range" :key="index">
            <view class="item" v-for="(item1, index1) in item" :key="index1"
              >{{ item1 }}
              {{ index ? (index === 1 ? "月" : "日") : "年" }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
const dayjs = require("dayjs");
export default {
  name: "XbdDatePicker",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    date: {
      type: String,
      default: "",
    },
    fields: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      range: [],
      value: [],
      disable: true,
    };
  },
  watch: {
    date(val) {
      this.changeValue();
    },
  },
  methods: {
    moveHandle(e) {
      e.preventDefault();
      e.stopPropagation();
    },
    // 数据项发生改变
    bindChange(e) {
      this.disable = false;
      this.value = e.detail.value;
      if (this.range[0][this.value[0]] === dayjs().year()) {
        if (this.fields === "month" || this.fields === "day") {
          if (this.range[1][this.value[1]] > dayjs().month() + 1) {
            // this.$set(this.value, 1, 0);
          }
        }
      }
      if (this.fields === "month" || this.fields === "day") {
        if (this.range[0][e.detail.value[0]] === dayjs().year()) {
          this.setMonthArr(dayjs().month() + 1);
        } else {
          this.setMonthArr(12);
        }
        // 判断如果 当前项为 undefined 就将当前项value 变为第一项
        if (!this.range[1][this.value[1]]) {
          this.$set(this.value, 1, 0);
        }
      }
      this.disable = true;
    },
    // 弹框隐藏
    changeVisible() {
      this.$emit("update:visible", !this.visible);
      this.changeValue();
    },
    // 确认
    confirm() {
      if (this.disable) {
        this.$emit("update:visible", !this.visible);
        this.$nextTick().then(() => this.setDate());
      }
    },
    // 获取最终确认返回的时间
    setDate() {
      let date = [];
      this.value.forEach((item, index) =>
        date.push(
          this.range[index][item] >= 10
            ? this.range[index][item]
            : "0" + this.range[index][item]
        )
      );
      this.$emit("setDate", date.join("-"));
    },
    // 设置年那一列的数组
    setYearArr() {
      const newYear = dayjs().year();
      let oldYear = newYear - 99;
      let nextYear = newYear + 1;

      const arr = [];
      for (let i = 1; i <= 100; i++) {
        arr.push(oldYear++);
      }
      arr.push(nextYear);
      this.$set(this.range, 0, arr);
    },
    // 设置月列的数组
    setMonthArr(month, newMonth) {
      const arr = [];
      for (let i = 0; i < 12; i++) {
        arr.push(i + 1);
      }
      this.$set(this.range, 1, arr);
    },
    // 设置value
    setValue() {
      // 获取当前时间
      const newDate = new Date();
      const newYear = newDate.getFullYear();

      // 获取用户传入的时间
      const date =
        this.date && this.date !== "日期选择" 
          ? new Date(this.date)
          : new Date();
      const year = date.getFullYear();
      const yearIdx = this.range[0].indexOf(year);
      this.value.push(yearIdx);

      if (this.fields === "month" || this.fields === "day") {
        // 年份对比 如果为当前年 则月份选择列表数据变更
        if (newYear === year) {
          const newMonth = newDate.getMonth() + 1;
          this.setMonthArr(newMonth, 12);
        }

        const month = date.getMonth() + 1;
        const monthIdx = this.range[1].indexOf(month);
        this.value.push(monthIdx);
      }
    },
    changeValue() {
      // 获取用户传入的时间
      const date =
        this.date && this.date !== "日期选择"
          ? new Date(this.date)
          : new Date();
      const year = date.getFullYear();
      const yearIdx = this.range[0].indexOf(year);
      this.$set(this.value, 0, yearIdx);

      if (this.fields === "month" || this.fields === "day") {
        const month = date.getMonth() + 1;
        const monthIdx = this.range[1].indexOf(month);
        this.$set(this.value, 1, monthIdx);
      }
    },
  },
  created() {
    // 准备年的数据
    this.setYearArr();
    // 准备月的数据
    if (this.fields === "month" || this.fields === "day") {
      this.setMonthArr(12);
    }
    this.setValue();
  },
};
</script>

<style scoped lang="scss">
.disable {
  color: #999988;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.4);

  z-index: 9999;
}
.picker-date {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 600rpx;
  background-color: #ffffff;
}
.button {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 50rpx;
  height: 80rpx;

  font-size: 32rpx;
  color: $uni-text-color;
  background-color: #f8f8f8;

  box-sizing: border-box;
  :nth-child(2) {
    color: $uni-color-primary;
  }
}
.picker-view {
  width: 750rpx;
  height: 520rpx;
}
.item {
  height: 50px;
  line-height: 50px;
  align-items: center;
  color: #000000;
  justify-content: center;
  text-align: center;
}
</style>
